<template>
  <div class="w-full h-full">
    <StatusBar
      :loading="loading"
      :commType="commType"
      :username="username"
      :viewUserNames="viewUserNames"
      :clientId="clientId"
    />

    <div class="flex items-center pr-4 justify-start w-full">
      <div>
        <v-btn variant="text" @click="() => router.back()">
          <j-icon>MdiArrowLeft</j-icon>
        </v-btn>
      </div>
      <div class="text-white text-sm flex-1">
        <div class="flex gap-x-2">
          <Autocomplete @change="onSearchChange" v-model="viewConfig" />
        </div>
      </div>
    </div>
    <!-- 轮播图 -->

    <div class="h-[calc(100%-88px)] flex flex-col sm:flex-row md:flex-row">
      <div
        class="px-4 pt-2"
        :class="{
          'sm:w-2/4 md:w-2/4 lg:w-1/3 md:flex md:flex-col md:gap-y-4': isShowSlider,
          'w-full': isShowGePu,
        }"
      >
        <Slider
          v-if="isShowSlider"
          ref="sliderRef"
          v-model="viewConfig"
          :screenInfo="screenInfo"
          @change="onSearchChange"
        />
        <GePuSlider v-model="viewConfig" @change="onSearchChange" v-if="isShowGePu"></GePuSlider>
      </div>

      <div class="hidden md:block md:w-1/4 lg:w-1/3" v-if="isShowSlider">
        <div class="w-full h-full overflow-hidden rounded-sm pb-4 relative">
          <Thumbs v-model="viewConfig" :screenInfo="screenInfo" @change="onSearchChange" :swiper="sliderRef" />
        </div>
      </div>

      <!-- 预览和配置区 -->
      <div class="flex-1 overflow-hidden md:w-1/3" v-if="isShowSlider">
        <div>
          <v-tabs v-model="tab" align-tabs="center" align-with-title class="text-title">
            <v-tab>配置</v-tab>
            <v-tab>预览</v-tab>
            <v-tab>快捷键</v-tab>
          </v-tabs>
        </div>

        <STabsWindow v-model="tab" class="h-[calc(100%-88px)] overflow-y-auto pt-2">
          <SwiperSlide class="stop-swiping">
            <div class="w-full h-full rounded-sm px-4">
              <ConfigView
                v-model="viewConfig"
                :screenInfo="screenInfo"
                @change="onSearchChange"
                :screenSrc="screenSrc"
              />
            </div>
          </SwiperSlide>
          <SwiperSlide class="px-4 w-full h-full stop-swiping">
            <div class="w-full h-full overflow-hidden">
              <Thumbs v-model="viewConfig" :screenInfo="screenInfo" @change="onSearchChange" :swiper="sliderRef" />
            </div>
          </SwiperSlide>
          <SwiperSlide class="px-4 w-full h-full">
            <div class="w-full h-full overflow-hidden rounded-sm">
              <v-table fixed-header>
                <thead>
                  <tr>
                    <th class="text-left">功能</th>
                    <th class="text-left">快捷键</th>
                  </tr>
                </thead>
                <tbody>
                  <tr v-for="(item, index) in shortcutKeyConfig" :key="index">
                    <td>{{ item.label }}</td>
                    <td>{{ item.des }}</td>
                  </tr>
                </tbody>
              </v-table>
              <div class="w-full text-gray-300">快捷键功能主要为PC端操作增加操作能力。</div>
            </div>
          </SwiperSlide>
        </STabsWindow>
      </div>
    </div>
  </div>
</template>

<script setup name="Touying">
import BackageContainer from "@/layout/BackageContainer.vue";
import useClient from "./new/hooks/useClient";
import RingLoading from "./new/components/Loading.vue";
import StatusBar from "./new/components/StatusBar.vue";
import JcBar from "@/layout/JcBar";
import Autocomplete from "./new/components/Autocomplete/Autocomplete.vue";
import Slider from "./new/components/Slider/Slider.vue";
import { ref, toRefs, effect, watch, computed } from "vue";
import { SwiperSlide } from "swiper/vue";
import STabsWindow from "@/components/STabsWindow.vue";
import { useRouter } from "vue-router";
import Thumbs from "./new/components/Slider/Thumbs.vue";
import ConfigView from "./new/components/Config/Config.vue";
import useShoutKeyConfig from "./new/hooks/useShoutKeyConfig.js";
import GePuSlider from "./new/components/GePuSlider/JcGePuTouYing.vue";
import { messageType } from "./config.js";

const sliderRef = ref(null);
const { sendConfig, commType, viewConfig, username, loading, viewUserNames, screenSrc, screenInfo, clientId } =
  useClient(true);

/**
 * 绑定快捷键
 */
const { shortcutKeyConfig } = useShoutKeyConfig(viewConfig, sliderRef, sendConfig);
const tab = ref(0);
const router = useRouter();
const isShowSlider = computed(() => {
  return messageType.ZM === viewConfig.messageType || messageType.JW === viewConfig.messageType;
});

const isShowGePu = computed(() => {
  return messageType.GP === viewConfig.messageType;
});
function onSearchChange() {
  sendConfig(viewConfig);
}
</script>
